<template>
   <div class="iframe-cont">
       <div class="content">
           <el-page-header  @back="$router.go(-1)" :content="form.id?'编辑设备':'新增设备'"></el-page-header>
           <el-form ref="deviceForm" :model="form" :rules="rules" size="mini" label-width="120px" label-position="left">

               <div class="group">
                   <div class="title">生产属性</div>
                   <el-form-item label="主板型号:" prop="macType">
                       <search-mac-type
                           :disabled="form.macStatus!==0"
                           width="220"
                           :multiple="false"
                           :show-title="false"
                           :default-value="form.macType"
                           @select="form.macType = $event.ids"
                       ></search-mac-type>
                   </el-form-item>

                   <el-form-item label="出厂编码:" required prop="macCode">
                       <el-input class="form-item" :disabled="form.macStatus!==0" v-model="form.macCode" placeholder="设备编码必须以字母开头+数字组合（限制8位）"></el-input>
                   </el-form-item>
                   <el-form-item label="设备类型:" prop="deviceClass">
                       <search-device-class
                           :disabled="form.macStatus!==0"
                           width="220"
                           :show-title="false"
                           :multiple="false"
                           :default-value="form.deviceClass"
                           @select="form.deviceClass=$event.ids"
                       >
                       </search-device-class>
                   </el-form-item>
                   <el-form-item label="主板编号:" required prop="deviceName">
                       <el-input class="form-item" :disabled="form.macStatus!==0" v-model="form.deviceName" placeholder="请输入主板编号"></el-input>
                       <el-button v-if="id && form.macStatus!==0" style="margin-left: 20px" type="text" @click="replaceDialog=true">更换主板</el-button>
                   </el-form-item>
                   <el-form-item label="版本密钥:" prop="deviceSecret">
                       <el-input class="form-item" :disabled="form.macStatus!==0" v-model="form.deviceSecret" placeholder="请输入版本密钥"></el-input>
                   </el-form-item>
               </div>
               <template v-if="interfaceVer==='v1'">
                   <el-divider></el-divider>
                   <div class="group">
                       <div class="title">基础属性</div>
                       <el-form-item label="加注流量计:" prop="fillType">
                           <el-radio v-for="item in flowmeters"
                                     :key="item.dictValue"
                                     v-model="form.fillType"
                                     :label="item.dictValue"
                           >{{item.dictName}}</el-radio>
                       </el-form-item>
                       <el-form-item label="读卡器:" prop="hasCard">
                           <el-radio v-model="form.hasCard" :label="1">有</el-radio>
                           <el-radio v-model="form.hasCard" :label="0">无</el-radio>
                       </el-form-item>
                       <el-form-item label="灯光:" prop="hasAdvert">
                           <el-radio v-model="form.hasAdvert" :label="1">有</el-radio>
                           <el-radio v-model="form.hasAdvert" :label="0">无</el-radio>
                       </el-form-item>
                       <el-form-item label="流量卡号:" prop="iotCardNo">
                           <el-input class="form-item"
                                     type="number"
                                     maxlength="30"
                                     @keydown.native="inputIntLimit"
                                     v-model="form.iotCardNo"
                                     placeholder="请输入流量卡号"
                           ></el-input>
                       </el-form-item>
                       <el-form-item label="主屏幕:" prop="mainScreen" required>
                           <el-radio :value="form.isBreakOne" @change="screenType(1)" :label="1">断码屏1</el-radio>
                           <el-radio :value="form.isBreakTwo" @change="screenType(2)" :label="1">断码屏2</el-radio>
                           <el-radio :value="form.isColorScreen" @change="screenType(3)" :label="1">彩屏</el-radio>
                           <el-radio v-show="false" v-model="form.mainScreen" ></el-radio>
                       </el-form-item>
                       <el-form-item label="键盘:" prop="hasKeyboard">
                           <el-radio v-model="form.hasKeyboard" :label="1">有</el-radio>
                           <el-radio v-model="form.hasKeyboard" :label="0">无</el-radio>
                       </el-form-item>
                       <el-form-item label="压力传感器:" prop="hasPressure">
                           <el-radio v-model="form.hasPressure" :label="1">有</el-radio>
                           <el-radio v-model="form.hasPressure" :label="0">无</el-radio>
                       </el-form-item>
                   </div>
                   <el-divider></el-divider>
                   <div class="group">
                       <div class="title f f-a-c">
                           <div style="width: 100px;">扩展属性</div>
                           <el-form-item class="isExpand" prop="isExpand">
                               <el-radio v-model="form.isExpand" :label="1">有</el-radio>
                               <el-radio v-model="form.isExpand" :label="0">无</el-radio>
                           </el-form-item>
                       </div>
                       <template v-if="form.isExpand==1">
                           <el-form-item label="温控装置:" prop="deviceType">
                               <el-radio
                                   v-for="item in tempDevice"
                                   :key="item.dictValue"
                                   v-model="form.deviceType"
                                   :label="item.dictValue"
                               >{{item.dictName}}</el-radio>
                           </el-form-item>
                           <el-form-item label="液位传感器:" prop="hasSensor">
                               <el-radio v-model="form.hasSensor" :label="2">有</el-radio>
                               <el-radio v-model="form.hasSensor" :label="0">无</el-radio>
                           </el-form-item>
                       </template>
                       <el-form-item label="生产人员:" prop="staffName">
                           <el-select class="form-item" v-model="form.staffName" placeholder="请选择生产人员">
                               <el-option v-for="item in personList"
                                          :key="item.staffId"
                                          :label="item.userName"
                                          :value="item.userName"
                               ></el-option>
                           </el-select>
                       </el-form-item>
                       <el-form-item label="安装照片:" prop="devicePhoto">
                           <upload-file type="image"
                                        ref="uploadBossPhoto"
                                        :limit="9"
                                        :file-list="form.devicePhoto"
                                        @change="form.devicePhoto = $event"
                                        upload-path="store_join_info/boss_photo"
                           ></upload-file>
                       </el-form-item>
                   </div>
               </template>
               <template v-if="interfaceVer==='v2'">
                   <el-divider></el-divider>
                   <div class="group">
                       <div class="title">基础属性</div>
                       <el-form-item label="加注流量计:" prop="fillType">
                           <el-radio v-for="item in flowmeters"
                                     :key="item.dictValue"
                                     v-model="form.fillType"
                                     :label="item.dictValue"
                           >{{item.dictName}}</el-radio>
                       </el-form-item>
                       <el-form-item label="电磁阀:" prop="electronicValve">
                           <el-radio v-model="form.electronicValve" :label="1">单阀（接小阀电路）</el-radio>
                           <el-radio v-model="form.electronicValve" :label="2">双阀</el-radio>
                           <el-radio v-model="form.electronicValve" :label="0">无</el-radio>
                       </el-form-item>
                       <el-form-item label="读卡器:" prop="hasCard">
                           <el-radio v-model="form.hasCard" :label="1">插卡式</el-radio>
                           <el-radio v-model="form.hasCard" :label="2">贴近式</el-radio>
                           <el-radio v-model="form.hasCard" :label="0">无</el-radio>
                       </el-form-item>
                       <el-form-item label="灯光:" prop="hasAdvert">
                           <el-radio v-model="form.hasAdvert" :label="1">有</el-radio>
                           <el-radio v-model="form.hasAdvert" :label="0">无</el-radio>
                       </el-form-item>
                       <el-form-item label="联网方式:" prop="networkWay">
                           <el-radio v-model="form.networkWay" :label="0">4G</el-radio>
                           <el-radio v-model="form.networkWay" :label="1">以太网</el-radio>
                       </el-form-item>
<!--                       <el-form-item label="流量卡号:" prop="iotCardNo">-->
<!--                           <el-input class="form-item"-->
<!--                                     type="number"-->
<!--                                     maxlength="30"-->
<!--                                     @keydown.native="inputIntLimit"-->
<!--                                     v-model="form.iotCardNo"-->
<!--                                     placeholder="请输入流量卡号"-->
<!--                           ></el-input>-->
<!--                       </el-form-item>-->
                   </div>
                   <el-divider></el-divider>
                   <div class="group">
                       <div class="title f f-a-c">
                           <div style="width: 100px;">扩展属性</div>
                           <el-form-item class="isExpand" prop="isExpand">
                               <el-radio v-model="form.isExpand" :label="1">有</el-radio>
                               <el-radio v-model="form.isExpand" :label="0">无</el-radio>
                           </el-form-item>
                       </div>
                       <template v-if="form.isExpand==1">
                           <el-form-item label="液位传感器:" prop="hasSensor">
                               <el-radio v-model="form.hasSensor" :label="2">有</el-radio>
                               <el-radio v-model="form.hasSensor" :label="0">无</el-radio>
                           </el-form-item>

                       </template>
                       <el-form-item label="生产人员:" prop="staffName">
                           <el-select class="form-item" v-model="form.staffName" placeholder="请选择生产人员">
                               <el-option v-for="item in personList"
                                          :key="item.staffId"
                                          :label="item.userName"
                                          :value="item.userName"
                               ></el-option>
                           </el-select>
                       </el-form-item>
                       <el-form-item label="安装照片:" prop="devicePhoto">
                           <upload-file type="image"
                                        ref="uploadBossPhoto"
                                        :limit="9"
                                        @change="form.devicePhoto = $event"
                                        upload-path="store_join_info/boss_photo"
                           ></upload-file>
                       </el-form-item>
                   </div>
               </template>
               <template v-if="interfaceVer==='v3'">
                   <el-divider></el-divider>
                   <div class="group">
                       <div class="title">基础属性</div>
                       <el-form-item label="加注流量计:" prop="fillType">
                           <el-radio v-for="item in flowmeters"
                                     :key="item.dictValue"
                                     v-model="form.fillType"
                                     :label="item.dictValue"
                           >{{item.dictName}}</el-radio>
                       </el-form-item>
                       <el-form-item label="电磁阀:" prop="electronicValve">
                           <el-radio v-model="form.electronicValve" :label="1">单阀（接小阀电路）</el-radio>
                           <el-radio v-model="form.electronicValve" :label="2">双阀</el-radio>
                           <el-radio v-model="form.electronicValve" :label="0">无</el-radio>
                       </el-form-item>
                       <el-form-item label="读卡器:" prop="hasCard">
                           <el-radio v-model="form.hasCard" :label="1">插卡式</el-radio>
                           <el-radio v-model="form.hasCard" :label="2">贴近式</el-radio>
                           <el-radio v-model="form.hasCard" :label="0">无</el-radio>
                       </el-form-item>
                       <el-form-item label="灯光:" prop="hasAdvert">
                           <el-radio v-model="form.hasAdvert" :label="1">有</el-radio>
                           <el-radio v-model="form.hasAdvert" :label="0">无</el-radio>
                       </el-form-item>
                       <el-form-item label="联网方式:" prop="networkWay">
                           <el-radio v-model="form.networkWay" :label="0">4G</el-radio>
                           <el-radio v-model="form.networkWay" :label="1">以太网</el-radio>
                       </el-form-item>
<!--                       <el-form-item label="流量卡号:" prop="iotCardNo">-->
<!--                           <el-input class="form-item"-->
<!--                                     type="number"-->
<!--                                     maxlength="30"-->
<!--                                     @keydown.native="inputIntLimit"-->
<!--                                     v-model="form.iotCardNo"-->
<!--                                     placeholder="请输入流量卡号"-->
<!--                           ></el-input>-->
<!--                       </el-form-item>-->
                   </div>
                   <el-divider></el-divider>
                   <div class="group">
                       <div class="title f f-a-c">
                           <div style="width: 100px;">扩展属性</div>
                           <el-form-item class="isExpand" prop="isExpand">
                               <el-radio v-model="form.isExpand" :label="1">有</el-radio>
                               <el-radio v-model="form.isExpand" :label="0">无</el-radio>
                           </el-form-item>
                       </div>
                       <template v-if="form.isExpand==1">
                           <el-form-item label="温控装置:" prop="deviceType">
                               <el-radio
                                   v-for="item in tempDevice"
                                   :key="item.dictValue"
                                   v-model="form.deviceType"
                                   :label="item.dictValue"
                               >{{item.dictName}}</el-radio>
                           </el-form-item>
                           <el-form-item label="第二显示屏:" prop="displayScreen">
                               <el-radio v-model="form.displayScreen" :label="1">有</el-radio>
                               <el-radio v-model="form.displayScreen" :label="0">无</el-radio>
                           </el-form-item>
                           <el-form-item label="补液流量计:" prop="hasStorage">
                               <el-radio v-model="form.hasStorage" :label="1">有</el-radio>
                               <el-radio v-model="form.hasStorage" :label="0">无</el-radio>
                           </el-form-item>
                           <el-form-item label="液位传感器:" prop="hasSensor">
                               <el-radio v-model="form.hasSensor" :label="2">有</el-radio>
                               <el-radio v-model="form.hasSensor" :label="0">无</el-radio>
                           </el-form-item>
                           <el-form-item label="反扫码摄像头:" prop="camera">
                               <el-radio v-model="form.camera" :label="1">有</el-radio>
                               <el-radio v-model="form.camera" :label="0">无</el-radio>
                           </el-form-item>
                       </template>
                       <el-form-item label="生产人员:" prop="staffName">
                           <el-select class="form-item" v-model="form.staffName" placeholder="请选择生产人员">
                               <el-option v-for="item in personList"
                                          :key="item.staffId"
                                          :label="item.userName"
                                          :value="item.userName"
                               ></el-option>
                           </el-select>
                       </el-form-item>
                       <el-form-item label="安装照片:" prop="devicePhoto">
                           <upload-file type="image"
                                        ref="uploadBossPhoto"
                                        :limit="9"
                                        :file-list="form.devicePhoto"
                                        @change="form.devicePhoto = $event"
                                        upload-path="store_join_info/boss_photo"
                           ></upload-file>
                       </el-form-item>
                   </div>
               </template>
           </el-form>
           <div class="f f-j-c">
               <el-button style="width: 160px;margin-top: 20px;" type="primary" @click="submit">确 定</el-button>
           </div>
       </div>
       <!--参数设置-->
       <params-set v-if="paramsDialog" :visible.sync="paramsDialog" :id="id" @fresh="$router.back()"></params-set>
       <!--更换主板-->
       <el-dialog
           :append-to-body="true"
           title="更换主板"
           :visible.sync="replaceDialog"
           width="440px"
           center
       >
           <el-form class="f f-d-c" :model="replaceForm" :rules="replaceRule" ref="replaceForm" size="small" label-width="100px" >
               <el-form-item label="新主板编号" prop="deviceName">
                   <el-input class="form-item" type="text" v-model="replaceForm.deviceName" placeholder="请输入"></el-input>
               </el-form-item>
               <el-form-item label="新版本秘钥" prop="deviceSecret">
                   <el-input class="form-item" type="text" v-model="replaceForm.deviceSecret" placeholder="请输入"></el-input>
               </el-form-item>
           </el-form>
           <div slot="footer">
               <el-button @click="replaceDialog=false">取 消</el-button>
               <span style="display: inline-block;width: 20px;"></span>
               <el-button type="primary" @click="confirmReplace">确 定</el-button>
           </div>
       </el-dialog>

   </div>
</template>

<script>
import UploadFile from "@/components/UploadFile";
import {inputIntLimit, interfaceVersion} from "@/utils";
import {Message} from "element-ui";
import {getDicts} from "@/api/common";
import SearchMacType from "@/components/SearchCondition/SearchMacType";
import ParamsSet from "@/components/ParamsSet";
import SearchDeviceClass from "@/components/SearchCondition/SearchDeviceClass";
import {abandonDevice, addDevice, getDeviceDetail, getDeviceSecret, replaceBoard, updateDevice} from "@/api/device";

    export default {
        components: {SearchDeviceClass, SearchMacType, UploadFile, ParamsSet},
        data(){
            const validateMacCode = (rule, value, callback) => {
                if (!/^[a-zA-Z]([a-zA-Z]|\d){1,6}/.test(value)) {
                    return callback(new Error('设备编码必须以字母开头+数字组合（限制8位）'));
                } else {
                    callback()
                }
            }

            const validateMainScreen = (rule, value, callback) => {
                console.log(!this.form.isBreakOne || !this.form.isBreakTwo || !this.form.isColorScreen)
                if (this.form.isBreakOne || this.form.isBreakTwo || this.form.isColorScreen) {
                    callback()
                } else {
                    return callback(new Error('请选择主屏幕'));
                }
            }
            return{
                inputIntLimit,
                paramsDialog: false,// 参数设置弹窗
                replaceDialog: false, // 更换主板弹窗
                tempDevice: [], // 温控装置
                flowmeters: [], // 加注流量计
                personList: [], // 按住人员数组
                form: {
                    macCode: '', // 输入设备出厂编码
                    macType: '',
                    deviceName:'', // 主板编号
                    deviceClass:'', // 设备类型
                    deviceSecret: '', // 版本秘钥
                    iotCardNo: '', // 流量卡号
                    originalDeviceCode: '', // 二维码编号
                    fillType: '', // 加注流量计
                    electronicValve: null, // 电磁阀
                    networkWay: null, //联网方式
                    hasAdvert: null, // 灯光
                    isExpand: 1, // 扩展板
                    deviceType: null, // 温控装置
                    hasStorage: null, // 补液流量计
                    displayScreen: null, // 显示屏
                    hasSensor: null, // 液位传感器
                    camera: null, // 相机
                    staffName: '', // 安装人员
                    devicePhoto: [], // 设备照片
                    hasCard: null,
                    hasKeyboard: null,
                    hasPressure: null,
                    mainScreen: null, // 1 断码屏1 2断码屏2 3彩屏
                    isBreakOne: null, //
                    isBreakTwo: null, //
                    isColorScreen: null, //
                    macStatus: 0,
                },
                replaceForm: {
                    deviceName: null,
                    deviceSecret: null,
                },
                id: null,
                rules: {
                    macCode: [ { validator: validateMacCode, trigger: 'blur' } ],
                    macType: [ { required: true, message: '请选择主板型号', trigger: 'change' }],
                    deviceName: [ { required: true, message: '请输入主板编号', trigger: 'blur' }],
                    deviceClass: [ { required: true, message: '请选择设备类型', trigger: 'change' }],
                    deviceSecret: [ { required: true, message: '请输入版本秘钥', trigger: 'blur' }],
                    iotCardNo: [ { required: true, message: '请输入流量卡号', trigger: 'blur' }],
                    originalDeviceCode: [ { required: true, message: '请输入二维码编号', trigger: 'blur' }],
                    fillType: [ { required: true, message: '请选择加注流量计类型', trigger: 'blur' }],
                    electronicValve: [ { required: true, message: '请选择电磁阀类型', trigger: 'change' }],
                    networkWay: [ { required: true, message: '请选择联网方式', trigger: 'change' }],
                    hasAdvert: [ { required: true, message: '请选择是否有灯光', trigger: 'change' }],
                    deviceType: [ { required: true, message: '请选择温控装置', trigger: 'change' }],
                    hasStorage: [ { required: true, message: '请选择补液流量计', trigger: 'change' }],
                    displayScreen: [ { required: true, message: '请选择是否有主屏幕', trigger: 'change' }],
                    hasSensor: [ { required: true, message: '请选择是否有液位传感器', trigger: 'change' }],
                    camera: [ { required: true, message: '请选择是否有摄像头', trigger: 'change' }],
                    staffName: [ { required: true, message: '请选择生产人员', trigger: 'change' }],
                    devicePhoto: [ { required: true, message: '请选择上传安装照片', trigger: 'change' }],
                    hasCard: [ { required: true, message: '请选择读卡器类型', trigger: 'change' }],
                    hasKeyboard: [ { required: true, message: '请选择是否有键盘', trigger: 'change' }],
                    hasPressure: [ { required: true, message: '请选择是否有压力传感器', trigger: 'change' }],
                    mainScreen: [ { validator:  validateMainScreen, trigger: 'change' }],
                },
                replaceRule: {
                    deviceName: [
                        { required: true, message: '请输入新主板编号', trigger: 'blur' },
                    ],
                    deviceSecret: [
                        { required: true, message: '请输入新版本秘钥', trigger: 'blur' },
                    ],
                },
                interfaceVer: null,
            }
        },
        watch: {
            'form.macType': {
                handler: function (val) {
                    if(!val) return;
                    this.interfaceVer = interfaceVersion(val)
                    this.getDeviceSecret(val)
                    this.setDefaultVal(this.interfaceVer)
                },
                immediate: true
            }
        },
        created() {
            this.cloneForm = this.form
            this.getTempDevice()
            this.getFlowmeters()
            this.getPersonList()
            if(this.$route.query.id) {
                this.id = this.$route.query.id
                this.getDeviceDetail()
            }
        },
        methods:{
            setDefaultVal(val) {
                if(!this.id) {
                    this.form = {
                        ...this.form,
                        ...{
                            fillType: 'FillType2', // 加注流量计
                            electronicValve: 0, // 电磁阀
                            networkWay: 0, //联网方式
                            hasAdvert: 1, // 灯光
                            isExpand: 1, // 扩展板
                            deviceType: 'DeviceType3', // 温控装置
                            hasStorage: 0, // 补液流量计
                            displayScreen: 0, // 显示屏
                            hasSensor: 1, // 液位传感器
                            camera: 0, // 相机
                            hasCard: 1,
                        }
                    }
                }
            },
            getDeviceSecret(macType) {
                getDeviceSecret({macType}).then(res => {
                    if(!this.form.id) {
                        this.form.deviceSecret = res.data.deviceSecret
                    }
                })
            },
            // 更换设备
            confirmReplace() {
                this.$refs.replaceForm.validate().then(() => {
                    replaceBoard({ id: this.id, ...this.replaceForm }).then(res => {
                        Message.success('主板更换成功！')
                        this.replaceDialog = false
                        this.getDeviceDetail()
                        this.replaceForm.deviceName = null
                        this.replaceForm.deviceSecret = null
                    })
                })
            },
            submit() {
                this.$refs.deviceForm.validate().then((res) => {
                    this.addOrUpdateDevice()
                }).catch(err => {
                    console.log(this.$refs.deviceForm)
                    console.log(err)
                })
            },
            getTempDevice() {
                getDicts('DeviceType').then(res => {
                    this.tempDevice = res.data
                })
            },
            getFlowmeters() {
                getDicts('FillType').then(res => {
                    this.flowmeters = res.data
                })
            },
            addOrUpdateDevice() {
                let form = {}
                let keys = this.$refs.deviceForm.fields.map(item => item.prop)
                keys.forEach(item => {
                    form[item] = this.form[item]
                })
                form.id = this.form.id
                form.isBreakOne = this.form.isBreakOne
                form.isColorScreen = this.form.isColorScreen
                form.isBreakTwo = this.form.isBreakTwo
                if(!this.id) {
                    addDevice(form).then(res => {
                        this.id = res.data
                        Message.success('添加成功')
                        this.paramsSetTip(res.data)
                    })
                } else {
                    updateDevice(form).then(res => {
                        Message.success('修改成功')
                        this.$router.go(-1)
                    })
                }
            },
            //获取安装人员列表
            getPersonList() {
                this.$http({
                    url:"/api/user/list",
                    method: 'get',
                }).then((res)=>{
                    this.personList = res.data
                })
            },
            getDeviceDetail() {
                getDeviceDetail(this.$route.query.id).then((res)=>{
                    this.form = res.data
                    this.form.mainScreen = this.form.isBreakOne || this.form.isBreakTwo || this.form.isColorScreen
                })
            },
            paramsSetTip(id) {
                return this.$confirm(`当前机器各项参数暂未设置，是否继续进行设置参数。`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '暂不设置',
                    type: 'warning',
                    center: true,
                }).then(() => {
                    this.id = id
                    this.paramsDialog = true
                }).catch(() => {
                    this.$router.go(-1)
                })
            },
            screenType(code) {
                this.form.mainScreen = code

                switch (code) {
                    case 1:
                        this.form.isColorScreen = 0;
                        let one = this.form.isBreakOne;
                        this.form.isBreakOne = one === 1 ? 0 : 1;
                        break;
                    case 2:
                        this.form.isColorScreen = 0;
                        let two = this.form.isBreakTwo;
                        this.form.isBreakTwo = two === 1 ? 0 : 1;
                        break;
                    case 3:
                        this.form.isBreakOne = 0;
                        this.form.isBreakTwo = 0;
                        let color = this.form.isColorScreen;
                        this.form.isColorScreen = color === 1 ? 0 : 1;
                        break;
                }
                console.log('code', this.form)
            },
        }
    }
</script>
<style>
.stop-message-box .red-btn {
    background: #F56C6C;
    color: #ffffff;
    border: none;
}
</style>

<style scoped lang="scss">


.group{
    margin-top: 40px;
    padding-left: 40px;
    .title{
        color: rgba(16, 16, 16, 100);
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
    }
}

.form-item {
    width: 220px;
}

.stop-device {
    position: absolute;
    right: 40px;
}
::v-deep .isExpand {
    margin-bottom: 0 !important;
    margin-left: 20px;
   .el-form-item__content {
       margin-left: 0 !important;
   }
}
</style>
